<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看已录小朋友信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        /* 媒体查询，适配小屏幕设备 */
        @media (max-width: 600px) {
            table, thead, tbody, th, td, tr {
                display: block;
            }

            th {
                display: none;
            }

            tr {
                border: 1px solid #ccc;
                margin-bottom: 10px;
            }

            td {
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
            }

            td:before {
                position: absolute;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            /* 为每个列添加标签 */
            td:nth-of-type(1):before { content: "姓名"; }
            td:nth-of-type(2):before { content: "性别"; }
            td:nth-of-type(3):before { content: "出生日期"; }
            td:nth-of-type(4):before { content: "身高（厘米）"; }
            td:nth-of-type(5):before { content: "体重（千克）"; }
            td:nth-of-type(6):before { content: "编辑"; }
            /* 可以根据实际列数添加更多 */
        }

        .search-form {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 0;
            width: 97%; /* 确保搜索表单占满父容器宽度 */
        }

        .search-form input[type="text"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px 0 0 4px;
            width: 70%; /* 调整搜索框宽度，给按钮留出空间 */
            font-size: 16px;
            box-sizing: border-box; /* 包含内边距和边框在宽度内 */
        }

        .search-form input[type="submit"] {
            padding: 10px 20px;
		    margin-left: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 15px;
            transition: background-color 0.3s ease;
            box-sizing: border-box; /* 包含内边距和边框在宽度内 */
        }

        .search-form input[type="submit"]:hover {
            background-color: #0056b3;
        }

        tfoot td {
            text-align: center; /* 让共*条记录居中显示 */
        }
    </style>
</head>
<body>
<!-- 显示用户登录信息和退出按钮 -->
{% if current_user.is_authenticated %}
<div class="user-info">
    <span class="welcome-text">欢迎，{{ current_user.username }}</span>
    <a href="{{ url_for('logout') }}" class="logout-button">退出登录</a>
</div>
{% endif %}
    <h1>查看已录小朋友信息</h1>
<div class="search-form">
    <style>
        .search-form {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
        }

        .search-form input[type="text"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px 0 0 4px;
            width: 300px;
            font-size: 16px;
        }

        .search-form input[type="submit"] {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 15px;
            transition: background-color 0.3s ease;
        }

        .search-form input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
    <form class="search-form" action="{{ url_for('view_children') }}" method="get">
        <input type="text" name="search" placeholder="按姓名搜索" value="{{ search }}">
        <input type="submit" value="搜索">
    </form>
</div>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>出生日期</th>
        <th>性别</th>
        <th>身高</th>
        <th>体重</th>
        <th>编辑</th>
    </tr>
    </thead>
    <tbody>
    {% for child in children %}
    <tr>
        <td>{{ child[2] }}</td>
        <td>{{ child[3] }}</td>
        <td>{{ child[4] }}</td>
        <td>{{ child[5] }}</td>
        <td>{{ child[6] }}</td>
        <td>
            <a href="{{ url_for('edit_child', child_id=child.id) }}" class="modify-button">修改</a>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>
    <tfoot>
    <tr>
        <td colspan="6">共 {{ children|length }} 条记录</td>
    </tr>
    </tfoot>
<div class="pagination">
    {% if has_prev %}
    <a href="{{ url_for('view_children', page=page - 1, search=search) }}">上一页</a>
    {% else %}
    <a href="#" class="disabled" aria-disabled=true>上一页</a>
    {% endif %}
    {% for page_num in range(1, total_pages + 1) %}
    {% if page_num == page %}
    <a class="active" href="{{ url_for('view_children', page=page_num, search=search) }}">{{ page_num }}</a>
    {% else %}
    <a href="{{ url_for('view_children', page=page_num, search=search) }}">{{ page_num }}</a>
    {% endif %}
    {% endfor %}
    {% if has_next %}
    <a href="{{ url_for('view_children', page=page + 1, search=search) }}">下一页</a>
    {% else %}
    <a href="#" class="disabled" aria-disabled=true>下一页</a>
    {% endif %}
    <span>共 {{ total_pages }} 页</span>
</div>
<a href="{{ url_for('user_main') }}" class="back-link">返回主页面</a>
</body>
</html>
